export default function Ul() {
  return (
    <div className="flex justify-center">
      <ul role="list" className="p-6 divide-y divide-slate-200">
        {persons.map((person) => (
          <li key={person.email} className="flex py-4 first:pt-0 last:pb-0">
            <img src={person.imageUrl} alt={person.name} className="w-10 h-10 rounded-full" />
            <div className="ml-3 overflow-hidden">
              <p className="text-sm font-medium text-slate-900">{person.name}</p>
              <p className="text-sm text-slate-300 truncate">{person.email}</p>
            </div>
          </li>
        ))}
      </ul>
    </div>
  )
}

const persons = [
  {
    name: '张三',
    email: 'zhangsanasd_123123@emailasdfsw.com',
    imageUrl: 'https://a.520gexing.com/uploads/allimg/2023092322/jj2cj2m1r4m.jpg'
  },
  {
    name: '李四',
    email: 'list@132.com',
    imageUrl: 'https://a.520gexing.com/uploads/allimg/2023092322/pbzw1ypwrvs.jpg'
  },
  {
    name: '王五',
    email: 'wangwo@qq.com',
    imageUrl: 'https://a.520gexing.com/uploads/allimg/2023092322/gqjlxqkuyc4.jpg'
  },
  {
    name: '赵六',
    email: 'zhaoliu33@ee.net',
    imageUrl: 'https://a.520gexing.com/uploads/allimg/2023092322/vc4tqjzhmwa.jpg'
  }
]